<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用定时器完成下雨特效。</title>
  <style>
    body {
      width: 100wh;
      height: 100vh;
      background-color: black;
    }
  </style>
</head>

<body>

</body>
<script>
  setInterval(function () {
    var rain = document.createElement("div");
    rain.style.position = "fixed";
    rain.style.height = 80 + "px";
    rain.style.width = "3px";
    rain.style.background = "pink"; //可以使用雨滴图片代替，懒没找
    rain.style.filter = "blur(3px)"
    rain.style.top = "0px";
    rain.style.opacity = parseInt(Math.random() * 10) / 10;
    rain.style.left = Math.random() * 1920 + "px";
    document.body.appendChild(rain);
    var t = 1;
    var timer = setInterval(function () {
      var height = parseInt(rain.style.top);
      t++;
      rain.style.top = height + 2 * (Math.pow(t, 2)) + "px";      // 模拟物体下落的公式
      if (parseInt(rain.style.top) >= 900) {
        clearInterval(timer);                            //删掉也可以，直接移除元素就不用停止循环调用
        rain.remove();
      }
    }, 20)
  }, 10)
</script>

</html>